<template>
  <div>
    <el-dialog v-model="show" :title="$t('修改密码')" width="643" @close="closePwd">
      <el-form :model="form" :rules="rules" ref="passwordForm">
        <!-- 旧密码 -->
        <el-form-item :label="$t('旧密码')" :label-width="formLabelWidth" :label-position="labelPosition" prop="oldPassword">
          <el-input v-model="form.oldPassword" type="password" autocomplete="off" :placeholder="$t('请输入旧密码')" show-password />
        </el-form-item>
        <!-- 新密码 -->
        <el-form-item :label="$t('新密码')" :label-width="formLabelWidth" :label-position="labelPosition" prop="newPassword">
          <el-input v-model="form.newPassword" type="password" autocomplete="off" :placeholder="$t('请输入新密码')" show-password />
        </el-form-item>
        <!-- 确认新密码 -->
        <el-form-item :label="$t('确认新密码')" :label-width="formLabelWidth" :label-position="labelPosition"
                      prop="confirmNewPassword">
          <el-input v-model="form.confirmNewPassword" type="password" autocomplete="off" :placeholder="$t('请再次输入新密码')"
                    show-password />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closePwd">{{ $t('取消') }}</el-button>
          <el-button type="primary" @click="submitForm" class="confirm">
            {{ $t('确认') }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  import { editPwd } from '@/api/index';
  import { ElMessage, ElMessageBox } from 'element-plus';
  export default {
    props: {
      id: {
        type: Number,
        default: null
      }
    },
    data() {
      // 自定义校验规则：确认新密码必须与新密码一致
      const validateConfirmNewPassword = (rule, value, callback) => {
        if (value !== this.form.newPassword) {
          callback(new Error(this.$t('两次输入的新密码不一致')));
        } else {
          callback();
        }
      };
      return {
        show: true,
        formLabelWidth: '110px',
        labelPosition: 'left',
        form: {
          oldPassword: '', // 旧密码
          newPassword: '', // 新密码
          confirmNewPassword: '', // 确认新密码
        },
        rules: {
          oldPassword: [
            { required: true, message: this.$t('请输入旧密码'), trigger: 'blur' },
          ],
          newPassword: [
            { required: true, message: this.$t('请输入新密码'), trigger: 'blur' },
            { min: 6, message: this.$t('密码长度至少为6位'), trigger: 'blur' },
          ],
          confirmNewPassword: [
            { required: true, message: this.$t('请再次输入新密码'), trigger: 'blur' },
            { validator: validateConfirmNewPassword, trigger: 'blur' },
          ],
        },
      };
    },
    mounted() {
    },
    methods: {
      // 关闭弹窗
      closePwd() {
        this.$emit('closeEditPwd');
      },
      // 提交表单
      submitForm() {
        this.$refs.passwordForm.validate(async (valid) => {
          if (valid) {
            try {
              const response = await editPwd({
                password: this.form.oldPassword,
                newPassword: this.form.newPassword,
              });
              if (response.data.code === 0) {
                ElMessage({
                  type: 'success',
                  message: this.$t('密码修改成功'),
                });
                this.closePwd();
                this.$emit('refresh');
              } else {
                ElMessage({
                  type: 'error',
                  message: response.data.message || this.$t('密码修改失败'),
                });
              }
            } catch (error) {
              console.error(this.$t('修改密码失败:'), error);
              ElMessage({
                type: 'error',
                message: this.$t('修改密码失败'),
              });
            }
          } else {
            console.log(this.$t('表单校验失败'));
            return false;
          }
        });
      },
    },
  };
</script>

<style scoped>
.avatar-uploader {
  display: flex;
  justify-content: center;
  align-items: center;
}
:deep(.el-form-item__label){
  align-items: center;
  line-height: unset;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.dialog-footer {
  text-align: right;
}

.confirm {
  margin-left: 10px;
}
</style>
